var fixedLeft = document.querySelector(".fixed-left")
console.log(fixedLeft)
var leftTop = fixedLeft.offsetTop;
console.log(leftTop)
fixedLeft.style.height = "100%";
// 1, 找标签
var navLeft = document.getElementsByClassName("fixed_left1")[0]// 左侧导航
console.log(navLeft)
var items = document.getElementsByClassName("brand") // 所有分类标签 
console.log(items)
var leftLis = document.querySelectorAll(".fixed_left1 li") // 左侧导航中的标题
console.log(leftLis)
var itemTops = [];  // 记录每一个分类标签与网页顶部的距离
var num = 0; // 记录当前选中分类索引

// 获取每一个分类标签与网页顶部的距离
for(var i = 0; i < items.length; i++){
    itemTops.push(items[i].offsetTop)
}
console.log(itemTops)
window.onscroll = function(){
    var scrollss = document.scrollingElement.scrollTop;
    if(document.scrollingElement.scrollTop<=leftTop){
        fixedLeft.style.top = (leftTop - scrollss) + "px";
        fixedLeft.style.height = "100%";
    }else{
        fixedLeft.style.top = "0";
        fixedLeft.style.height = "100%";
    }
    if(document.scrollingElement.scrollTop >= itemTops[0]-200){
        navLeft.style.position = "fixed"
        navLeft.style.top = "200px"
    }else{
        navLeft.style.position = "absolute"
        navLeft.style.top = "2027px"
    }

    
    leftLis[num].className = ""
    // 网页滚动设置当前选中分类索引
    for(var i = 0; i < itemTops.length; i++){
        if(document.scrollingElement.scrollTop >= itemTops[i]-300){
            num = i
        }
    } 
    leftLis[num].className = "active"
}


//左右联动(点击左侧导航标题,网页滚动到对应位置)
for(var i = 0; i < leftLis.length; i ++){
    leftLis[i].index = i
    leftLis[i].onclick = function(){
        // 设置样式
        this.className = "active"
        leftLis[num].className = ""
        num = this.index

        // 网页滚动到分类对应位置
        document.scrollingElement.scrollTop = itemTops[this.index] - 100
    }
}